<template>
  <view class="contentBg">
<!--    <cu-custom bgColor="bg-yellow">-->
<!--      <block slot="content">用户中心</block>-->
<!--    </cu-custom>-->
    <view class="gradient-linear" :style="[{'padding-top':barH + 'rpx','height':height+'rpx'}]">
      <view class=''>
        <view class="cu-list menu-avatar">
          <view class="cu-item bg-transparent">
            <view class="cu-avatar round lg"
                  @tap="showModal"
                  :style="'background-image:url('+avatarUrl+');'"></view>
            <view class="content">
              <view class="text-cust-black" v-if="userName!=''" >{{userName}}</view>
              <view class="text-cust-grey text-sm flex">
                <view v-if="userId!=undefined" class="text-cut">
                  手机号码：{{phone}}
                </view>
                <view v-if="!userId" class="text-cut text-white text-bold" open-type="getUserInfo" lang="zh_CN" @tap="getUserInfo">请先登录</view>
              </view>
            </view>
            <view  v-if="userId"><view class="whiteColor" v-if="auditStatus==1">已认证</view><view class="whiteColor" v-else @tap="authInfo"> &nbsp;&nbsp;请认证 &nbsp;&nbsp;</view><view> &nbsp;&nbsp;</view></view>
          </view>
        </view>
      </view>
      <view class="bg-yqxj margin flex align-center " @tap="goYq">
        <view class="padding-left-xl txt-yqxj">邀请下级&nbsp;&nbsp;&nbsp;共享收益&nbsp;</view>
        <view class="flex-twice text-right padding-right txt-ljyq">立即邀请&nbsp;></view>
      </view>
      <view class="wdsy margin-sm">
        <view class="sy-txt">团队管理&nbsp;></view>
        <view class="flex clear">
          <view class="flex-sub text-center">
            <view class="font-txx-1">团队总数</view>
            <view class="font-txt-2">1000<font class="desc">&nbsp;位</font></view>
          </view>
          <view class="flex-sub text-center border-l-r">
            <view class="font-txx-1">今日新增</view>
            <view class="font-txt-2">300<font class="desc">&nbsp;位</font></view>
          </view>
          <view class="flex-sub text-center">
            <view class="font-txx-1">会员总数</view>
            <view class="font-txt-2">200<font class="desc">&nbsp;位</font></view>
          </view>
          <view class="flex-sub text-center">
            <view class="font-txx-1">今日新增</view>
            <view class="font-txt-2">60<font class="desc">&nbsp;位</font></view>
          </view>
        </view>
      </view>
    </view>
<!--    <user-statsitc></user-statsitc>-->
    <view class="hyjl padding-left padding-right margin-top-sm padding-top-sm">
      <view class="txt-lyjl">会员奖励 <image src="@/static/images/my/lw.png" class="lw" /></view>
      <view class="flex align-center">
        <view class="flex-sub box text-center">
            <view class="jl">累计奖励</view>
            <view class="je clore_blue">¥59.90</view>
        </view>
        <view style="width: 10rpx"></view>
        <view class="flex-sub box text-center">
          <view class="jl">今日奖励</view>
          <view class="je clore_red">¥59.90</view>
        </view>
      </view>
      <view class="qydl margin-top">
        <view class="tip1"><image src="@/static/images/my/dz.png" class="img-dz"/>四川省成都市青羊区</view>
        <view class="tip1"><image src="@/static/images/my/time.png" class="img-time"/>加入时间 2024/07/14 12:12:13 </view>
        <view class="txt-qydl">
          区域代理&nbsp;>
        </view>
        <view class="tgdd">
          <view class="title-tgdd">
            <image src="@/static/images/my/dd2.png" class="img-dd" /> 推广订单
          </view>
          <view class="flex margin-top">
            <view class="flex-sub">
              <view class="xx-tile">累计支付</view>
              <view class="sz-ms">1000<font class="f-ms">&nbsp;位</font></view>
            </view>
            <view class="flex-sub">
              <view class="xx-tile">累计完结</view>
              <view class="sz-ms">300<font class="f-ms">&nbsp;单</font></view>
            </view>
            <view class="flex-sub">
              <view class="xx-tile">进行中</view>
              <view class="sz-ms">200<font class="f-ms">&nbsp;单</font></view>
            </view>
          </view>
        </view>
        <view class="yjjs">
          <view class="title-yjjs">
            <image src="@/static/images/my/yj.png" class="img-yj" /> 佣金结算
          </view>
          <view class="flex margin-top">
            <view class="flex-sub">
              <view class="xx-tile">累计支付</view>
              <view class="sz-ms">1000<font class="f-ms">&nbsp;位</font></view>
            </view>
            <view class="flex-sub">
              <view class="xx-tile">累计完结</view>
              <view class="sz-ms">300<font class="f-ms">&nbsp;单</font></view>
            </view>
            <view class="flex-sub">
              <view class="xx-tile">进行中</view>
              <view class="sz-ms">200<font class="f-ms">&nbsp;单</font></view>
            </view>
          </view>
        </view>
        <view class="ffhy">
          <view class="title-ffhy">
            <image src="@/static/images/my/hy.png" class="img-hy" /> 付费会员
          </view>
          <view class="flex margin-top">
            <view class="flex-sub">
              <view class="xx-tile">累计支付</view>
              <view class="sz-ms">1000<font class="f-ms">&nbsp;位</font></view>
            </view>
            <view class="flex-sub">
              <view class="xx-tile">累计完结</view>
              <view class="sz-ms">300<font class="f-ms">&nbsp;单</font></view>
            </view>
            <view class="flex-sub">
              <view class="xx-tile">进行中</view>
              <view class="sz-ms">200<font class="f-ms">&nbsp;单</font></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="cu-list menu sm-border card-menu" style="margin-right: 0rpx; margin-left: 0rpx;background: rgb(245,245,245)">
      <view class="cu-item arrow" style="background: transparent!important;">
        <view class="content">
          <image src="@/static/images/my/ywygl.png" class="png" mode="aspectFill"></image>
<!--          <text class="cuIcon-list text-lg"/>-->
          <text class="text-left  padding-left-sm">区域合伙人管理</text>
        </view>
      </view>
      <view class="cu-item arrow" style="background: transparent!important;">
        <view class="content">
          <image src="@/static/images/my/dd2.png" class="png" mode="aspectFill"></image>
          <text class="text-left  padding-left-sm">订单管理</text>
        </view>
      </view>

      <view class="cu-item arrow" style="background: transparent!important;">
        <view class="content">
          <image src="@/static/images/my/sh2.png" class="png" mode="aspectFill"></image>
          <text class="text-left  padding-left-sm">商户管理</text>
        </view>
      </view>
      <view class="cu-item arrow" style="background: transparent!important;">
        <view class="content">
          <image src="@/static/images/my/yj.png" class="png" mode="aspectFill"></image>
          <!--          <text class="cuIcon-list text-lg"/>-->
          <text class="text-left padding-left-sm">佣金结算</text>
        </view>
      </view>
      <view class="cu-item arrow" style="background: transparent!important;">
        <view class="content">
          <image src="@/static/images/my/yxfx.png" class="png" mode="aspectFill"></image>
<!--          <text class="cuIcon-list text-lg"/>-->
          <text class="text-left padding-left-sm">销售分析</text>
        </view>
      </view>
      </view>
  </view>
</template>

<script setup lang="ts">
import {onMounted, computed, reactive, ref, getCurrentInstance} from 'vue'
import {onLoad, onReady, onShow} from '@dcloudio/uni-app';
import {useStore} from "@/common/store";
import { getUser, getWeixinOpenid, saveUser} from "../../common/api/user";
import UserStatsitc from "../../components/UserStatsitc.vue";
const store = useStore();

const token = computed(() => store.token)
const userId = computed(() => store.userId)
const userName = computed(() => store.userName)
const avatarUrl = computed(() => store.avatarUrl)
const phone = computed(() => store.phone)
const auditStatus = computed(() => store.auditStatus)

const oraUrlPage = ref('')
const redirectType = ref('')

const version = ref('1.0.0')

const mpGetUserInfo = (result) => {
  console.log('mpGetUserInfo', result);
}

const {appContext} = getCurrentInstance()
const barH = ref(60)
barH.value = appContext.config.globalProperties.CustomBar;

const height = ref(280) + barH


const hzr = ()=>{
  console.log('hzr')
}

const initLogin = () => {
  if ((!userId.value) || userId.value ==0) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `您还没有登录，请先登录！`
    });
  }
}


const goYq = () => {
		uni.navigateTo({
		  url: `/pages/user/dyr`
		})
}

const authInfo = () => {
  initLogin();
  uni.navigateTo({
    url: `/pages/user/authInfo`
  })
}


const getUserInfo = () => {
  if (!token.value) {
    setTimeout(() => {
      // uni.authorize({
      //   scope: 'scope.userInfo',
      //   success() {
      uni.login({
        provider: 'weixin',
        // "onlyAuthorize": true, // 微信登录仅请求授权认证
        success: function (loginRes) {
          getWeixinOpenid(loginRes).then(res => {
          if(res && res.data && res.data.openid) {
             let openID = res.data.openid;
             console.log('openId:',openID)
             token.value = openID
            if (openID) {
                // 登录
                getUserStore(openID)
            } else {
              uni.showToast({
                icon: 'none',
                duration: 5000,
                title: '获取用户失败,请重试!'
              })
            }
          }
        });
		  }
    });
      // }
      // })
    }, 1000);
  }
}

const getUserStore = async (openid) => {
  await getUser(openid).then(r => {
    if(r && r.data) {
      let res = r.data
      console.log('res:',res)
      console.log('auditStatus:',res.auditStatus)
      store.$patch({
        avatarUrl: res.url,
        userId: res.id,
        userName: res.name,
        hasLogin: true,
        phone: res.phone,
        token: openid,
        auditStatus:res.auditStatus,
        adminLevel: res.adminLevel,
        adminLevelName: res.adminLevelName,
        qrcode: res.qrcode,
        promoCode: res.promoCode,
        promoCodeUrl: res.promoCodeUrl,
        upgradePreLevel: res.upgradePreLevel,
        upgradeLevel: res.upgradeLevel,
        upgradeTime: res.upgradeTime,
        city: res.city,
        ownerShop: res.ownerShop
      })
      console.log('auditStatus:',auditStatus.value)
    } else {
      store.$patch({
        avatarUrl: '',
        userId: '',
        userName: '',
        hasLogin: false,
        phone: '',
        auditStatus:0,
        adminLevel: 0,
        adminLevelName: '',
        qrcode: '',
        promoCode: '',
        promoCodeUrl: '',
        upgradePreLevel: '',
        upgradeLevel: '',
        upgradeTime: '',
        city: '',
        ownerShop: {
          poiId: '',
          poiName: '',
          address:'',
          cardType:'',
          cardStartTime:'',
          cardEndTime:'',
          corporation: '',
          corporationPhone: '',
          storePhone: '',
          businessLicense: '',
          sanitaryLicensePhoto: '',
          sanitaryLicensePhotos: [],
          dredgeDouyin: '',
          dredgeBuy: '',
          businessLicensePhoto: '',
          businessLicensePhotos: [],
          corporationPhoto: '',
          corporationPhotos: [],
          corporationCard: '',
          corporationCardBank: '',
          doorPhoto: '',
          doorPhotos: [],
          evnPhoto: '',
          evnPhotos: [],
          douyinPhoto: '',
          douyinPhotos: [],
          deliveryAddress: '',
          businessHour: ''
        }
      })
      uni.showToast({ //提示
        duration: 5000,
        title: '未查询到用户信息，请先注册！',
        success: function(res) {
          uni.navigateTo({
            url: `/pages/user/register?openid=` +openid + `&oraUrlPage=` +oraUrlPage.value+"&redirectType="+redirectType.value
          })
        }
      })
    }
  }).catch(e=>{

  })
}

const myTeam = () => {
  initLogin();
  uni.navigateTo({
    url: `/pages/user/myTeam`
  })
}



onLoad((options) => {
  oraUrlPage.value = options.oraUrlPage
  redirectType.value = options.redirectType
})

onMounted(async () => {
  console.log('token:',token.value)
  if (token.value) {
    await getUserStore(token.value)
  }
})

</script>

<style lang="scss" scoped>
.ucenter-bg {
  /*background-color: #66ccff;*/
  height: 250rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.ucenter-bg text {
  opacity: 0.8;
}

.ucenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.whiteColor {
  font-size: 26rpx;
  background: #FFBF36;
  border-radius: 25rpx 0rpx 0rpx 25rpx;
  height: 50rpx;
  line-height: 50rpx;
  margin-right: 30rpx;
}

.leftView {
  color: #999999;
  font-size: 20rpx;
}

.syView{
  text-align: center;
  .szView {
    font-size: 50rpx;
  }
  .tsView {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #999999;
  }
}


.page {
  height: 100Vh;
  width: 100vw;
}

.page.show {
  overflow: hidden;
}

.switch-sex::after {
  content: "\e716";
}

.switch-sex::before {
  content: "\e7a9";
}

.switch-music::after {
  content: "\e66a";
}

.switch-music::before {
  content: "\e6db";
}

/* 线性渐变 */
.gradient-linear {
  width: 100wh;
  background: linear-gradient(to bottom, #ffca61, #fffcf5);
  .bg-yqxj{
    background-image: url('');
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-position: center; /* 背景图片居中 */
    width: 100wh; /* 元素宽度 */
    height: 90rpx; /* 元素高度 */
    .txt-yqxj{
      font-size: 35rpx;
      color: #FFFFFF;
      text-shadow: 0rpx 9rpx 11rpx rgba(6,0,1,0.14);
    }
    .txt-ljyq{
      font-size: 26rpx;
      color: #FFFFFF;
    }

  }
  .wdsy {
    height: 275rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 9rpx 28rpx 7rpx rgba(4,0,0,0.04);
    border-radius: 30rpx;
    width: 100wh;
    margin: 0 30rpx;
    .sy-txt {
      font-weight: bold;
      font-size: 36rpx;
      color: #2A2A2A;
      background: #F4658C;
      float: right;
      padding: 12rpx 30rpx;
      color: #FFFFFF;
      box-shadow: 0rpx 9rpx 28rpx 7rpx rgba(4,0,0,0.04);
      border-radius: 0rpx 20rpx;
      margin-bottom: 40rpx;
    }
    .clear{
      clear: both;
    }
    .border-l-r{
      border-left: 1px solid #AFAFAF;
      border-right: 1px solid #AFAFAF;
    }
    .font-txx-1 {
      font-size: 26rpx;
      color: #757575;
      margin-bottom: 22rpx;
    }
    .font-txt-2 {
      font-size: 34rpx;
      color: #2A2A2A;
      .desc{
        font-size: 22rpx;
        color: #757575;
      }
    }
  }

  .cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after {
    border-bottom: 0rpx solid transparent!important;
  }
}

.hyjl{
  background: rgb(245,245,245);
  .txt-lyjl{
    margin-bottom: 30rpx;
    font-size: 36rpx;
    color: #111111;
    .lw {
      width: 37rpx;
      height: 33rpx;
    }
  }
  .box {
    background: #FFFFFF;
    border-radius: 10rpx;
    .jl{
      padding-top: 40rpx;
      font-size: 30rpx;
      color: #3D3D3D;
      padding-bottom: 30rpx;
    }
    .je{
      padding-bottom: 32rpx;
      font-size: 42rpx;
    }
    .clore_blue{
      color: #627DF1;
    }
    .clore_red{
      color: #FF505D;
    }
  }
  .qydl{
    background: #ffffff;
    border-radius: 23rpx;
    position: relative;
    .tip1{
      padding-left: 20rpx;
      font-size: 24rpx;
      color: #797979;
      padding-top: 20rpx;
      .img-dz{
        width: 19rpx;
        height: 24rpx;
        margin-right: 20rpx;
      }
      .img-time{
        margin-right: 20rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }
    .txt-qydl{
      position: absolute;
      background: #14C3F4;
      border-radius: 0rpx 20rpx;
      right: 0rpx;
      top: 0rpx;
      padding: 12rpx 20rpx;
      color: white;
    }
    .tgdd{
      margin-top: 50rpx;
      text-align: center;
      .title-tgdd{
        font-size: 28rpx;
        color: #1F1F1F;
        .img-dd{
          width: 20rpx;
          height: 23rpx;
          padding-left: 10rpx;
        }
      }
      .xx-tile{
        font-size: 24rpx;
        color: #757575;
      }
      .sz-ms{
        font-size: 28rpx;
        color: #14C3F4;
        .f-ms{
          font-size: 20rpx;
        }
      }
    }
    .yjjs{
      margin-top: 50rpx;
      text-align: center;
      .title-yjjs{
        font-size: 28rpx;
        color: #1F1F1F;
        .img-yj{
          width: 24rpx;
          height: 24rpx;
          padding-left: 10rpx;
        }
      }
      .xx-tile{
        font-size: 24rpx;
        color: #757575;
      }
      .sz-ms{
        font-size: 28rpx;
        color: #FF2732;
        .f-ms{
          font-size: 20rpx;
        }
      }
    }
    .ffhy{
      margin-top: 50rpx;
      padding-bottom: 30rpx;
      text-align: center;
      .title-ffhy{
        font-size: 28rpx;
        color: #1F1F1F;
        .img-hy{
          width: 24rpx;
          height: 24rpx;
          padding-left: 10rpx;
        }
      }
      .xx-tile{
        font-size: 24rpx;
        color: #757575;
      }
      .sz-ms{
        font-size: 28rpx;
        color:#2CC309;
        .f-ms{
          font-size: 20rpx;
        }
      }
    }
  }
}

.png{
  width: 29rpx;
  height: 30rpx;
}


</style>
